<style>
	.userBranchBox {
		width: 750rpx;
		background: #fff;
		overflow: hidden;
	}
	
	.userBranch {
		width: 100%;
		height: 78rpx;
		border-bottom: 2rpx solid #f2f2f2;
		line-height: 78rpx;
		box-sizing: border-box;
		float: right;
		padding-left: 20rpx;
	}
	.userBranch view {
		display: inline-block;
	}
	.userBranch view image {
		vertical-align: middle;
	}
	.branchTxt {
		font-size: 26rpx;
	}
	.goRight {
		width: auto;
		height: 100rpox;
		float: right;
	}
	.goRight image {
		width: 38rpx;
		height: 38rpx;
	}
	.change_newest{
		margin-right: 20rpx;
		color: #eb1b1b;
	}
</style>
<template>
    <view class='page'>
        <view class="g-address">
            <view class="m-address-info" @tap="chooseAddress">
                <view v-if="isAddress" class="m-no-address">点击添加收货地址</view>
                <view v-if="!isAddress" class="m-address-info-l">
                    <view class="m-address-info-t">
                        <view class="u-address-name">{{addressData.realname}}</view>
                        <view class="u-address-mobile">{{addressData.mobile}}</view>
                    </view>
                    <view class="u-address-content">{{addressData.province_text+addressData.city_text+addressData.zone_text+addressData.address}}</view>
                </view>
                <view class="m-address-info-r">
                    <arrow size="50" color="#656565" direction="right"></arrow>
                </view>
            </view>
            <!-- <view class="m-address-bg"></view> -->
			<image src="../../../../static/icons/jewel/addr_bg.png" mode="" class='m-address-bg'></image>
        </view>

        <!-- 商品详情 -->
        <view class='good-box'>
            <view class='common'>
                <view class='common-box content-box'>
                    <view class='com-name'>广东恒朗</view>
                    <view class='com-contact'>
                        <button open-type="contact" class='contact'>
                            <image src='../../../../static/icons/jewel/order_msg.png'></image> 联系商家
                        </button>
                    </view>
                </view>
            </view>
            <!--珠宝-->
            <view class='good'>
                <view class='lease content-box' v-for="(item, index) in order" :key="index">
                    <view class='lease-img'>
                        <image :src='item.photo'></image>
                    </view>
                    <view class='lease-info'>
                        <view class='lease-title'>{{item.goods_name}}</view>
                        <view class='lease-attr font-color-hs'>{{item.item_names}}</view>
                    </view>
                    <view class='lease-price'>
                        <!-- <view class='font-color-hs lease-market-price'>¥market</view> -->
                        <view>¥{{item.shop_price}}</view>
                        <view class='lease-num font-color-hs'>x{{item.buy_num}}</view>
                    </view>
                </view>
            </view>

            <!-- <view class='common'>
                <view class='common-box content-box'>
                    <view class='com-name'>快递运费 : <view class='package font-color-hs'>全国包邮</view>
                    </view>
                    <view class='com-contact'>¥0.00</view>
                </view>
            </view> -->
            <view class='order-content content-box'>
                <input placeholder="有特别需求的，可以在这里填写喔~" class='input-content' @blur="log_content" />
            </view>
        </view>
        <view class="total_price">
			<view class="take_time">
				<view class="take_name">
					预约提货时间
				</view>
				<view class="take_picker">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
					<arrow size="36" color="#999999" direction="right"></arrow>
				</view>
			</view>
			<view class="price_box">
				<view class="single_price">
					<view class="price_title">
						享用数量
					</view>
					<view class="price single_price_text">
						*{{buy_number}}
					</view>
				</view>
			</view>
            <view class="total_pay single_price_text">
            	实付金额：¥{{order_total}}
            </view>
        </view>
		
		<view class="pay_type_box">
			<view class="">
				<view class="pay_type wxpay" @tap="pay">
					支付
				</view>
			</view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
    </view>
</template>
<script>
    import hl from '@/common/common_zb.js';
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		} else if (type === 'take_time') {
			year = year;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
    export default {
        data() {
            return {
                goods_id: 0,    // 商品id
                choose_item_id: 0,  // 规格id
                buy_number: 1,  // 购买件数
                order: [],  // 订单信息
                isAddress: false,
                addressData: {}, // 地址信息
                addressId: '',  // 地址id
				order_no: 0,	// 订单id（首次点击支付会生成订单id，或从订单列表进来）
				order_content: '',	// 订单备注
				order_total: 0,	// 订单总价格
				bIsShowLoading: false,
				options: {},
				payPop: false,
				bIsShowFefund: false,
				take_time:getDate('take_time'),
				date: getDate({
					format: true
				}),
				startDate:getDate('start'),
				endDate:getDate('end')
            }
        },
        onLoad(options) {
            let that = this;
			that.options = options;
            that.goods_id = options.goods_id;
            that.choose_item_id = options.choose_item_id;
			that.bIsShowLoading = true;
			let address_id = options.address_id;
			if(address_id) {
				hl.get('member/address_view',{id: address_id},true,function(res){
					that.addressData = res.data.data;
					that.addressId = address_id;
				});
				
			}else{
				hl.get('member/address',{},true,function(res){
				    if (!res.data.data.length) {
				        that.isAddress = true
				        return false;
				    }
				    that.addressData = res.data.data[0];
					that.addressId = that.addressData.id;
				});
			}
			var loadData = {};
			if(options.order_no) {
				that.order_no = options.order_no;
				loadData = {order_no: this.order_no};
			}else{
				loadData = {choose_item_id: options.choose_item_id, goods_id: options.goods_id, buy_number: options.buy_number};
			}
			hl.get('pick/getOrderInfo', loadData, true, function(res){
				that.bIsShowLoading = false;
				let res_data = res.data;
				if(res_data.code == '-1') {
					hl.showToast(res_data.msg)
					setTimeout(function (){
						uni.navigateBack();
					}, 2000)
				}else{
					let resdata = res_data.data;
					that.buy_number = resdata.number;
					that.order = resdata.data;
					that.order_total = resdata.order_total;
				}
			})
        },
        methods: {
			// 选择地址
			chooseAddress(){
				var url = '/pages/user/settings/address/address?agent=1&';
				if(this.order_no) {
					url+= 'order_no='+ this.order_no;
				}else{
					url+= 'choose_item_id='+this.choose_item_id+'&goods_id='+this.goods_id+'&buy_number='+this.buy_number
				}
				uni.navigateTo({
					url: url
				})
			},
			// 支付
			pay(){
				this.bIsShowLoading = true;
				let that = this;
				var loadData = {};
				if(that.order_no) {
					loadData.order_no = that.order_no;
				}else{
					loadData.goods_id = this.goods_id;
					loadData.choose_item_id = this.choose_item_id;
					loadData.buy_number = this.buy_number;
				}
				loadData.address_id = this.addressId;
				loadData.take_time = this.take_time;
				hl.post('pick/pay_order', loadData, true, function (res){
					that.bIsShowLoading = false;
					let data = res.data;
					hl.showToast(data.msg, 1500);
					if(data.code =='0'){
						setTimeout(function (){
							uni.reLaunch({
								url: '/pages/jewel/agent/order/ordersuccess?order_no=' + data.order_no
							})
						}, 1500)
					}
				})
			},
			// 记录额外描述
			log_content(e){
				this.order_content = e.target.value;
			},
			bindDateChange: function(e) {
				this.date = this.take_time = e.target.value
			},
        }
    }
</script>
<style>
    page {
        background: #efefef;
        /*小程序最外层默认有一个page标签*/
    }
    .g-address{
        border-top: 2rpx solid #ddd;
		overflow: hidden;
		height: auto;
    }
    .m-no-address{
        padding-left: 40upx;
        font-size: 30upx;
    }
    .m-address-info{
        width: 100%;
        position: relative;
        padding: 20upx 0;
        background: #ffffff;
    }
    .m-address-info-l{
        width: 600upx;
        margin-left: 40upx;
    }
    .m-address-info-r{
        position: absolute;
        right: 20upx;
        top: 50%;
        transform: translateY(-50%);
    }
    .m-address-info-t{
        display: flex;
        align-items: center;
        height: 40upx;
        margin-bottom: 18upx;
        font-size: 32upx;
    }
    .u-address-name,.u-address-mobile{
        font-weight: bold;
        margin-right: 20rpx;
    }
    .u-address-content{
        font-size: 29upx;
        color: #5f5f5f;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .m-address-bg{
        width: 100%;
        height: 8upx;
		position: relative;
		top: -20rpx;
    }

    .page {
        background: #efefef;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: '微软雅黑'
    }

    .font-color-hs {
        color: #999;
    }

    .addr-box {
        height: auto;
        width: 100%;
        margin-top: 16rpx;
    }

    .addr_bg {
        height: 9rpx;
        width: 100%
    }

    .addr-content {
        width: 95%;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
        padding-top: 31rpx;
        padding-bottom: 10rpx;
    }

    .addr-content .addr-view {
        float: left
    }

    .addr-content image {
        width: 39rpx;
        height: 39rpx;
    }

    .addr-icon {
        padding-top: 19rpx;
        padding-left: 15rpx;
    }

    .addr-icon-none {
        padding-left: 15rpx;
    }

    .addr-list {
        margin-left: 18rpx;
        font-size: 28rpx;
    }

    .addr-info {
        font-size: 25rpx;
        color: #727272;
        margin-top: 20rpx;
        margin-bottom: 32rpx;
    }

    .addr-edit {
        float: right !important;
        padding-top: 19rpx;
    }

    .addr-edit-none {
        float: right !important;
    }

    .good-box {
        height: auto;
        width: 100%;
        overflow: hidden;
		background: #FFFFFF;
    }

    .common {
        border-bottom: 1px solid #ddd;
        height: 102rpx;
        width: 100%;
        line-height: 102rpx;
    }

    .content-box {
        width: 90%;
        height: 100%;
        margin: 0 auto;
        font-size: 28rpx;
		margin-bottom: 20rpx;
		overflow:hidden;
    }

    .com-name {
        float: left;
    }

    .com-contact {
        float: right;
        color: #666;
		padding-top: 24rpx;
    }

    .com-contact image {
        width: 39rpx;
        height: 39rpx;
        position: relative;
        top: 10rpx;
    }
	

    .good {
        height: auto;
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #ddd;
        margin-top: 30rpx;
    }

    .lease-img {
        float: left;
        width: 144rpx;
        height: 192rpx;
        border: 2rpx solid #d8d8d8;
        margin-right: 21rpx;
    }

    .lease-img image {
        width: 100%;
        height: 100%
    }

    .lease-info {
        width: 376rpx;
        float: left;
        font-size: 26rpx;
    }

    .lease-title {
        height: 74rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .lease-attr {
        height: 88rpx;
        overflow: hidden;
        font-size: 24rpx;
        margin-top: 10rpx;
    }

    .lease-price {
        float: right;
        font-size: 26rpx;
    }

    .lease-num {
        margin-top: 14rpx;
    }

    .lease-market-price {
        text-decoration: line-through;
    }

    .package {
        display: inline-block;
        font-size: 26rpx;
    }

    .total_price{
        background: #fff;
    }
	
	.price_box{
		height: auto;
		padding-bottom: 12rpx;
		border-bottom: 2rpx solid #eee;
	}
	.single_price{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 95%;
		margin: 0 auto;
		padding-top: 12rpx;
	}
	.total_pay{
		height: 60rpx;
		margin-top: 10rpx;
		text-align: right;
		margin-right: 15rpx;
	}
	.single_price_text{
		font-size: 16px;
		color: #fd6361;
	}
	.pay_type_box{
		width: 100%;
		margin-top: 56rpx;
	}
	.pay_type{
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		width: 90%;
		margin: 20upx auto;
	}
	.wxpay{
		background: #06ba04;
	}
	.jewel_granary{
		background: #fd6361;
	}
	.alipay{
		background: #1b95d4;
	}
    .input-content {
        width: 100%;
        background: #f5f5f5;
        height: 69rpx;
        border-radius: 7rpx;
        font-size: 25rpx;
        padding-left: 22rpx;
        margin-top: 20rpx;
    }
	.pay-btn{
		width: 80%;
		margin: 20upx auto;
		border-radius: 100px;
		background: #d71311;
		color: #fff;
		text-align: center;
		padding: 18upx;
		font-size: 32upx;
	}
	.z-show {
	    transform: translateY(0) !important;
	}
	.u-popup-mask {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100vw;
	    height: 100vh;
	    background: rgba(0, 0, 0, .5);
	    z-index: 10;
	}
	.take_time{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		margin: 0 auto;
		padding: 15upx 0;
	}
	.take_time .take_picker{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
	}
	.take_time .take_picker picker{
		flex: 1;
		text-align: right;
	}
</style>